import React, { PureComponent, Fragment } from "react";
import ReactDom from 'react-dom';
import { DatePickerView, Modal, Button } from "antd-mobile";
import { isNull, combineDefaultStr, handleDateFunc, timeZero, timeMsec } from "../../../utils/helper"
import moment from "moment"
import MIcon from "../../MIcon";

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _react2 = _interopRequireDefault(React);
const renderSubtreeIntoContainer = ReactDom.unstable_renderSubtreeIntoContainer;

export default class MyDatePickerFooter extends PureComponent {
	constructor(props) {
		super(props);
		let value = this.props.value;
		this.state = {
			value: value,
			pickerStart: new Date(moment().subtract(50, "years").format("YYYY/MM/DD")),
			pickerEnd: new Date(moment().add(50, "years").format("YYYY/MM/DD")),
			datePickerValue: new Date()
		}
	}
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let { value, is_msec } = nextProps;
			if (isNull(value)) {
				if (value === undefined) {
					let { is_now, value_datatype = "string" } = nextProps;
					let isNumber = value_datatype === "number";
					if (is_now == 1) {
						if (isNumber) {
							let now = moment();
							now = timeZero(now);
							this.changeValue(now)
						}
						else {
							this.changeValue(moment())
						}
					}
				}
			}
			else {
				if (value.toString().indexOf("get") != -1) {
					value = moment(handleDateFunc(value));
					this.changeValue(moment(value))
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		const { value_datatype = "string", type = "date", is_msec = 0 } = this.props;
		let isNumber = value_datatype === "number";
		let mFormat = "";
		if (isNull(value)) {

		}
		else {
			if (type == "year") {
				value.month(1);
				value.day(1);
				mFormat = "YYYY"
			}
			else if (type == "month") {
				value.day(1);
				mFormat = "YYYY-MM"
			}
			else {
				mFormat = "YYYY-MM-DD"
			}
			if (isNumber) {
				value = timeZero(value);
				// value = parseInt(value.valueOf() / 1000)
				value = parseInt(value.valueOf() / timeMsec(is_msec))
			}
			else {
				value = timeZero(value);
				value = value.format(mFormat)
			}
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		value = moment(value);
		this.changeValue(value);
	};

	componentDidMount() {
		let { is_now = 0, value_datatype = "string", is_msec } = this.props;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {
			if (is_now == 1) {
				if (isNumber) {
					let now = moment();
					now = timeZero(now);
					this.changeValue(now)
				}
				else {
					this.changeValue(moment())
				}
			}
		}
		else {
			if (value.toString().indexOf("get") != -1) {
				value = moment(handleDateFunc(value));
				this.changeValue(moment(value))
			}
		}
		this.renderButton();
	}
	renderButton() {
		let { value } = this.state;
		let footerButtons = document.getElementById("footerButtons");
		renderSubtreeIntoContainer(this,
			_react2['default'].createElement("div",
				{
					className: "",
					id: "",
					style: {}
				},
				<div style={{ background: "#ddd", position: "fixed", bottom: 0, width: "100%", height: "50px", zIndex: 999, fontSize: "20px" }} data-flex="box:mean cross:center">
					<div style={{ textAlign: "center" }} onClick={() => {
						alert(1);
					}} >
						<MIcon type="left" style={{ fontSize: "35px" }} />
					</div>
					<div onClick={() => {
						this.setState({
							show: true
						})
					}} style={{ textAlign: "center", width: "50%", margin: "0 5%" }}>
						2019-03-26
					</div>
					<div style={{ textAlign: "center" }} onClick={() => {
						alert(2);
					}} >
						<MIcon type="xiayiye" style={{ fontSize: "35px" }} />
					</div>
				</div>
			),
			footerButtons
		)
	}
	render() {
		let { label, required, disabled, readonly, show_label, tips, type = "date", value_datatype = "string", hasError, errorMsg, format } = this.props;
		let { pickerStart, pickerEnd } = this.state;
		if(isNull(type)){// type枚举  date:YYYY-MM-DD ,month:YYYY-MM ,year:YYYY 
			type="date"
		}
		let isDisabled = disabled == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		let isString = value_datatype === "string";
		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				value = moment(value);
				if (type == "year") {
					value = value.format("YYYY")
				}
				else if (type == "month") {
					value = value.format("YYYY-MM")
				}
				else {
					value = value.format("YYYY-MM-DD")
				}
			}
			if (isString) {
				if (typeof value == "object") {
					value = moment(value).format(format);
				}
				value = new Date(value.replace(/-/g, "/"))
			}
		}
		return (
			<div>
				<Modal
					visible={this.state.show}
					transparent
					wrapClassName="datepicker"
					style={{ width: "80%" }}
					footer={
						[
							{
								text: "取消", onPress: () => {
									this.setState({
										show: false
									})
								}
							},
							{
								text: "确定", onPress: () => {
									this.setState({
										show: false
									})
								}
							}
						]
					}
				>
					<DatePickerView
						minDate={pickerStart}
						maxDate={pickerEnd}
						value={this.state.datePickerValue}
						mode={type}
						onChange={(e) => {
							this.setState({
								datePickerValue: e
							})
						}}
					/>
				</Modal>

			</div>
		)
	}
}
